<template>
	<view class="flex-row justify-between mult-member-item-container">
		<view class="flex-row flex-wrap flex1">
			<view class="flex-shrink cover-box-item">
				<view class="u-cover-box">
					<view class="cover-box">
						<image mode="scaleToFill" class="cover" :src="imagePrefix(member.photo)"></image>
					</view>
					<view class="master-box" v-if="member.master">
						<text class="font12 text-white">桌主</text>
					</view>
				</view>
			</view>
			<view class="flex1 flex-column justify-between">
				<view class="flex1">
					<text>{{member.cnname}}</text>
				</view>
				<view class="flex1 flex-row align-center">
					<text :class="member.num>=0?'text-price':''">
						{{member.num>=0?'赢：':'输：'}}{{member.num||0}}
					</text>
				</view>
			</view>
		</view>
		<view class="flex-shrink flex-row justify-center align-center">
			<uni-tag @click="toggleScoreModal(true)" v-if="userId&&userId!==member.user_id" type="primary">给分</uni-tag>
		</view>

		<!-- 给分弹框 start -->
		<Popup v-model="modalData.show" hideHeader>
			<view style="height: 100%;" class="flex1 flex-column justify-between">
				<view class="flex-row justify-between m_x10 red-box">
					<view class="flex1 flex-row justify-end align-center p_r10">
						<text class="text-light">给分至>></text>
					</view>
					<view class="flex-row flex-wrap flex1">
						<view class="flex-shrink cover-box-item">
							<view class="u-cover-box">
								<view class="cover-box">
									<image mode="scaleToFill" class="cover" :src="imagePrefix(member.photo)"></image>
								</view>
								<view class="master-box" v-if="member.master&&member.user_id===member.master">
									<text class="font12 text-white">桌主</text>
								</view>
							</view>
						</view>
						<view class="flex1 flex-column justify-between">
							<view class="flex1">
								<text>{{member.cnname}}</text>
							</view>
							<view class="flex1 flex-row align-center">
								<text :class="member.num>=0?'text-price':''">
									{{member.num>=0?'赢：':'输：'}}{{member.num||0}}
								</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 键盘 start -->
				<Keyboard @comfirm="onGiveScore" v-model="modalData.value" />
				<!-- 键盘 end -->
			</view>
		</Popup>
		<!-- 给分弹框 end -->

	</view>
</template>

<script>
	import {
		toast,
		imagePrefix,
	} from "@/utils/helpers.js"
	import Popup from "../popup/Popup.vue"
	import Keyboard from "../keyboard/Keyboard.vue"
	import Table from "../../api/Table.js"
	export default {
		name: "MultMemberItem",
		emits: ["onInit"],
		components: {
			Popup,
			Keyboard,
		},
		props: {
			userId: Number, // 登录用户id
			member: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				modalData: {
					show: false,
					value: "",
				},
			}
		},
		methods: {
			imagePrefix,
			async onGiveScore(value) {
				try {
					if (value <= 0) {
						throw new Error("给分必须大于0")
					}
					await Table.multGiveScore(
						this.userId,
						this.member.user_id,
						value,
					);
					toast("给分成功")
					this.toggleScoreModal(false)
					this.$emit("onInit")
				} catch (e) {
					toast(e.message)
				}

			},
			toggleScoreModal(show = false) {
				this.modalData = {
					show,
					value: "",
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mult-member-item-container {
		background-color: #f9f9f9;
		padding: 10rpx;
		border-radius: 3px;
	}

	.red-box {
		border: solid 4rpx $priceColor;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.cover-box-item {
		padding-top: 10rpx;
		padding-right: 30rpx;

		.u-name-box {
			width: 100%;
			overflow: hidden;
			height: 50rpx;
			line-height: 50rpx;
		}

		.u-cover-box {
			width: 110rpx;
			border-radius: 5rpx;
			flex-shrink: 0;
			position: relative;


			.cover {
				width: 100rpx;
				height: 100rpx;
				border: solid 1rpx #ccc;
				border-radius: 3rpx;
			}

			.master-box {
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				padding: 0 10rpx;
				border-radius: 10rpx;
				background-color: $uni-color-error;
			}
		}
	}
</style>
